import React from 'react';
import { Button, ImagePicker, List, TextareaItem, Toast, WhiteSpace, WingBlank } from 'antd-mobile';
import { createForm } from 'rc-form';
import { connect } from 'dva';
import { Helmet } from 'react-helmet';
import { upload } from '../services/helpService';

class LoginPage extends React.Component {

  state = {
    files: [],
  }

  componentDidMount() {
    window.scrollTo(0, 0);
  }

  onChange = (files, type, index) => {
    if (type === 'add') {
      const file = files[files.length - 1].file;
      if (file.size > 1024 * 1024) {
        Toast.fail('超出图片大小1M');
        return;
      }
      const formDate = new FormData();
      formDate.append('file', file);
      upload(formDate).then(({ data }) => {
        this.setState(prev => ({ files: [...prev.files, { url: data.url }] }));
      }).catch((err) => {
        Toast.fail('出现错误，请重试', 1);
      });
    } else if (type === 'remove') {
      const files = [...this.state.files];
      files.splice(index, 1);
      this.setState({
        files,
      });
    }
  }

  login = () => {
    this.props.form.validateFields((error, value) => {
      if (error) {
        let msg;
        for (const k in error) {
          if (Object.prototype.hasOwnProperty.call(error, k)) {
            msg = error[k].errors[0].message;
          }
          break;
        }
        Toast.fail(msg, 1);
        return;
      }

      const { currentUser } = this.props.auth;
      const { files } = this.state;
      const pic = [files[0] ? files[0].url : undefined, files[1] ? files[1].url : undefined, files[2] ? files[2].url : undefined];

      const body = {
        shopName: `${currentUser.shopName}-${currentUser.branchName}`, // 品牌
        userName: currentUser.username || currentUser.saleManName,
        phone: currentUser.phone,
        describe: value.describe,
        pic,
      };

      this.props.dispatch({ type: 'help/feedback', payload: { ...body } });
    });
  };

  render() {
    const { getFieldProps } = this.props.form;
    const { files } = this.state;

    return (

      <div>
        <Helmet>
          <title>
            意见反馈
          </title>
        </Helmet>

        <List>
          <List.Item>意见描述<span style={{ color: 'red' }}>*</span></List.Item>
          <TextareaItem
            {...getFieldProps('describe', {
              rules: [{ required: true, message: '请输入内容' }],
            })}
            rows={5}
            count={200}
            placeholder="请描述您的问题或意见"
          />
          <List.Item>
            图片<span style={{ color: '#bbb', fontSize: '0.8em' }}>（选填，提供问题截图）</span>
            <div style={{ float: 'right' }}>{this.state.files.length}
              <span style={{ color: '#bbb' }}>/3</span>
            </div>
          </List.Item>
          <ImagePicker
            files={files}
            onChange={this.onChange}
            // onImageClick={(index, fs) => console.log(index, fs)}
            selectable={files.length < 3}
          />

        </List>
        <WhiteSpace size="xl" />
        <WingBlank>
          <Button
            type="primary" style={{ background: "rgb(5,173,205)" }} onClick={this.login}
            loading={this.props.loading} disabled={this.props.loading}
          >提交</Button>
        </WingBlank>
      </div>
    );
  }
}

export default connect((state) => {
  return {
    auth: state.auth,
    loading: state.help.loading,
  };
})(createForm()(LoginPage));

